// 显示弹框
// const modalDom = document.querySelector('#modal')
// const modal = new bootstrap.Modal(modalDom)

// 调用鉴权函数
checkLogin()

// 调用退出业务函数
logout()

//调用 渲染用户名 
renderUser()

//显示弹框
// const myModalEl = document.getElementById('myModal')
// myModalEl.addEventListener('hidden.bs.modal', event => {
//     // do something...
//   })
//获取模态框
const modalDom = document.querySelector('#modal')
// 实例化
const modal = new bootstrap.Modal(modalDom)
// show  显示 hide1 隐藏
// 监听显示和隐藏  需要绑定事件 事件类型'show.bs.modal'显示触发   'hide.bs.modal'隐藏触发
// document.querySelector('#openModal').addEventListener('click', function () {
//     //显示模态框
//     modal.show()
// })
// modalDom.addEventListener('show.bs.modal',event=>{
// console.log('显示了')
// })
// modalDom.addEventListener('hide.bs.modal',event=>{
//     console.log('隐藏了')
// })

//数据增删改查
const list = document.querySelector('.list')
async function render(){
const {data} = await axios.get('/students')
// console.log(data)
list.innerHTML=data.map(item=>{
    return `
        <tr>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.gender ? '女':'男'}</td>
            <td>第${item.group}组</td>
            <td>${item.hope_salary}</td>
            <td>${item.salary}</td>
            <td>${item.province}${item.city}${item.area}</td>
            <td>
        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${item.id}></i></a>
        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${item.id}></i></a>
         </td>
     </tr> 
    `
 }).join('')
}
render()


//初始化省市区
const proSelect = document.querySelector('[name=province]')
const citSelect = document.querySelector('[name=city]')
const areaSelect = document.querySelector('[name=area]')
let p =''
async function initSelect(){
    // 获取省份
    const{list}=await axios.get('/api/province')
    const html1 = list.map(item=>{
        return `
        <option value="${item}">${item}</option>
        `
    }).join('')
    proSelect.innerHTML=`<option value="">--省份--</option>`+html1
    // 获取城市
    proSelect.addEventListener('change', async function (e) {
        // 怎么获取切换的省份
        p = e.target.value
        const{list}= await axios.get(`/api/city?pname=${e.target.value}`)
        const html2 =list.map(item=>{
            return `
            <option value="${item}">${item}</option>
            `
        }).join('')
        citSelect.innerHTML=`<option value="">--城市--</option>`+html2
        // 切换省份恢复默认
        areaSelect.innerHTML=`<option value="">--地区--</option>`
    })
    // 获取地区
    citSelect.addEventListener('change', async function (e) {
        const{list}= await axios.get(`/api/area?pname=${p}&cname=${e.target.value}`)
        const html3 =list.map(item=>{
            return `
            <option value="${item}">${item}</option>
            `
        }).join('')
        areaSelect.innerHTML=`<option value="">--地区--</option>`+html3
    })

}
initSelect()

// 定义标识
let rowId

// 添加业务
document.querySelector('#openModal').addEventListener('click', function () {
    // 给定义标识赋值
    rowId = null

    // 显示模态框
    modal.show()
})

// 编辑业务
list.addEventListener('click', async function (e) {
    // 判断事件源
    if(e.target.classList.contains('bi-pen')){
        // 给定义的标识赋值
        rowId = e.target.dataset.id 
        // 数据回显
        // 数据请求 拿到点击的数据
        const{data}=await axios.get(`/students/${rowId}`)
        // 给标签绑定数据
        // 给有规则的表单进行赋值（回显）
        const resArr = ['name','age','salary','group','hope_salary',]
        resArr.forEach(item=>{
            document.querySelector(`[name=${item}]`).value=data[item]
        })
        // 给性别进行赋值（回显）
        const genders = document.querySelectorAll('[name=gender]')
        genders[data.gender].checked=true
        // 给籍贯进行赋值（回显）
        const {province,city,area}=data
        // 回显省份
        proSelect.value=province
        // 回显城市
        const {list:list1} = await axios.get(`/api/city?pname=${province}`)
        const html2 =list1.map(item=>{
            return `
            <option value="${item}">${item}</option>
            `
        }).join('')
        citSelect.innerHTML=`<option value="">--城市--</option>`+html2
        // 回显
        // 省市区下拉菜单回显  首先下拉菜单有数据（省城区） 给对应的标签设置value值
        citSelect.value = city
        // 回显地区
        const {list:list2}=await axios.get(`/api/area?pname=${province}&cname=${city}`)
        const html3 =list2.map(item=>{
            return `
            <option value="${item}">${item}</option>
            `
        }).join('')
        areaSelect.innerHTML=`<option value="">--城市--</option>`+html3
        // 回显
        // 省市区下拉菜单回显  首先下拉菜单有数据（省城区） 给对应的标签设置value值
         areaSelect.value = area
        //显示模态框
        modal.show()
    }
    // 判断是否为删除按钮
    if(e.target.classList.contains('bi-trash')){
        const id = e.target.dataset.id
        const flag = confirm('是否确定删除?')
        // console.log(flag)  true 确定  false 取消
        if(flag){
            // 删除数据
            await axios.delete(`/students/${id}`)
            // 提示
            showToast('删除成功')
            // 渲染
            render()
        }
    }
})

const form = document.querySelector('#form')
// 点击确定按钮  添加和编辑
document.querySelector('#submit').addEventListener('click', async function () {
    // 判断添加还是编辑
    if(rowId){
        //编辑
        // 收集用户信息  表单
        const data = serialize(form,{hash:true,empty:true})
        // 处理数据  数字转为布尔类型
        data.age = +data.age
        data.gender = +data.gender
        data.group = +data.group
        data.salary = +data.salary
        data.hope_salary = +data.hope_salary
        // 提交数据
        await axios.put(`/students/${rowId}`,data)
        // 提示用户
        showToast('编辑成功')
        // 重新渲染
        render()
    }else{
        //添加
        // 收集用户信息  表单
        const data = serialize(form,{hash:true,empty:true})
        // 处理数据  数字转为布尔类型
        data.age = +data.age
        data.gender = +data.gender
        data.group = +data.group
        data.salary = +data.salary
        data.hope_salary = +data.hope_salary
        // 提交数据
        await axios.post('/students',data)
        // 提示用户
        showToast('添加成功')
        // 重新渲染
        render()
    }
    // 隐藏模态框
    modal.hide()
})

// 监听模态框是否显示  显示修改模态框的标题
modalDom.addEventListener('show.bs.modal', event => {
    document.querySelector('.modal-title').innerHTML = rowId ? '编辑学员' :'添加学员'
  })

// 监听模态框隐藏 
modalDom.addEventListener('hide.bs.modal',event=>{
    form.reset()
})
